<template lang="pug">
  <div>
    <div class="mbx">
      <span>园所数据统计</span>
      <div>
        <span>数据统计管理</span>
        <img src="@/assets/right.png" alt="">
      </div>
    </div>
    <div style="display: flex;justify-content: space-between;">
      <div class="box">
        <div class="box_title">
          <img src="@/assets/yuan.png">
          <span>综合信息</span>
        </div>
        <div style="display: flex;" class="left12">
          <div class="box_item_left">
            <div class="box_item">
              <span class="box_item_title">教职工人数</span>
              <div class="box_item_data">
                <div>
                  <span class="box_item_data_num">{{ data.staffCount }}</span>
                  <span>（所）</span>
                </div>
                <img src="@/assets/jzgrs.png" alt="">
              </div>
            </div>
            <div class="box_item box_item2">
              <span class="box_item_title">班级数量</span>
              <div class="box_item_data">
                <div>
                  <span class="box_item_data_num">{{ data.classCount }}</span>
                  <span>（名）</span>
                </div>
                <img src="@/assets/bjsl.png" alt="">
              </div>
            </div>
            <div class="box_item box_item3">
              <span class="box_item_title">男生人数</span>
              <div class="box_item_data">
                <div>
                  <span class="box_item_data_num">{{ data.maleCount }}</span>
                  <span>（个）</span>
                </div>
                <img src="@/assets/nan.png" alt="">
              </div>
            </div>
            <div class="box_item box_item4">
              <span class="box_item_title">女生人数</span>
              <div class="box_item_data">
                <div>
                  <span class="box_item_data_num">{{ data.femaleCount }}</span>
                  <span>（个）</span>
                </div>
                <img src="@/assets/nv.png" alt="">
              </div>
            </div>
        </div>
        <div class="box_item_right">
          <div class="echartBox">
            #staticsEchartsBox(style="height: 190px;width:190px;")
          </div>
        </div>
        </div>
      </div>
      <div class="box ml16" style="flex:1">
        <div class="box_title">
          <img src="@/assets/yuan.png">
          <span>年级分布</span>
        </div>
        div.grade_list.grade
          div.grade_list_item(v-for="(it,idx) in gradeList" :key="idx" v-if="it.name!=='早教'" :style="{background:it.bac}")
            div.grade_list_item_title {{it.name}}
            div.grade_list_item_content
              img(:src="it.src")
              div.p25(style="display: flex;justify-content: space-between;")
                div
                  span.grade_list_item_content_num {{it.classesCount}}
                  span （个）
                div.ml16
                  span.grade_list_item_content_num {{it.childrenCount}}
                  span （个）
      </div>
    </div>
  </div>
</template>
<script>
import echartMixin from '@/mixins/echarts'
import { dashboard2 } from '@/api/dashboard'

export default {
  name: 'StaticsEcharts',
  mixins: [echartMixin],
  data () {
    return {
      echartsId: 'staticsEchartsBox',
      data: {
        childrenCount: 0,
        maleCount: 0,
        femaleCount: 0,
        areaCount: 0,
        classCount: 0,
        teacherCount: 0,
        staffCount: 0
      },
      gradeList: []
    }
  },
  mounted () {
    this.getData()
  },
  created () {
  },
  methods: {
    getData () {
      dashboard2().then(res => {
        this.data = res.information
        this.gradeList = res.gradeCount
        for (let index = 0; index < this.gradeList.length; index++) {
          if (this.gradeList[index]['name'] === '新生儿班') {
            this.$set(this.gradeList, index, { ...this.gradeList[index], bac: '#FEFBEE', src: require('@/assets/xseb.png') })
          }

          if (this.gradeList[index]['name'] === '乳儿班') {
            this.$set(this.gradeList, index, { ...this.gradeList[index], bac: '#FEF9F9', src: require('@/assets/reb.png') })
          }

          if (this.gradeList[index]['name'] === '托小班') {
            this.$set(this.gradeList, index, { ...this.gradeList[index], bac: '#F2FEFE', src: require('@/assets/txb.png') })
          }

          if (this.gradeList[index]['name'] === '托大班') {
            this.$set(this.gradeList, index, { ...this.gradeList[index], bac: '#FAFAFE', src: require('@/assets/tdb.png') })
          }

          if (this.gradeList[index]['name'] === '托中班') {
            this.$set(this.gradeList, index, { ...this.gradeList[index], bac: '#F9FEEE', src: require('@/assets/tzb.png') })
          }

          if (this.gradeList[index]['name'] === '毕业班') {
            this.$set(this.gradeList, index, { ...this.gradeList[index], bac: '#FFF9FE', src: require('@/assets/byb.png') })
          }
        }
        const chartData = {
          man: { value: res.information.maleCount, name: '男生' },
          faleMan: { value: res.information.femaleCount, name: '女生' }
        }
        this.getEcharts(chartData)
      })
    },
    getEcharts (values) {
      console.log(values)
      const options = {
        backgroundColor: '#E7EDFB',
        title: {
          text: values.man.value + values.faleMan.value,
          subtext: '幼儿总数',
          top: 'center',
          left: 'center',
          textStyle: {
            fontSize: 24,
            lineHeight: 10
          }
        },
        grid: {
          top: 0,
          bottom: 0,
          left: 0
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '学生情况',
            type: 'pie',
            radius: ['60%', '90%'],
            avoidLabelOverlap: false,
            labelLine: {
              length: 5
            },
            label: {
              show: false
            },
            data: [
              {
                ...values.man,
                itemStyle: {
                  color: '#58A5FF'
                }
              },
              {
                ...values.faleMan,
                itemStyle: {
                  color: '#FBB624'
                }
              }
            ]
          }
        ]
      }
      this.$_chartMixin_init(options)
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  padding: 16px;
  background: #FFFFFF;
  border-radius: 8px;
  margin-bottom: 24px;
}

.box_title {
  display: flex;
  align-items: center;
  font-family: Source Han Sans SC, Source Han Sans SC;
  font-weight: 500;
  font-size: 16px;
  color: #000000;
  text-align: left;
  font-style: normal;
  text-transform: none;

  img {
    margin-right: 12px;
    margin-left: 8px;
  }
}

@media only screen and (max-width: 1800px){
  .grade_list {
    grid-template-columns: repeat(2, 1fr) !important;
    /* 三列布局 */
  }
}

@media only screen and (max-width: 1600px){
  .left12 {
    flex-wrap: wrap;
  }
  .grade_list {
    grid-template-columns: repeat(3, 1fr) !important;
    /* 三列布局 */
  }
}

@media only screen and (max-width: 1300px){
  .left12 {
    flex-wrap: wrap;
  }
  .grade_list {
    grid-template-columns: repeat(2, 1fr) !important;
    /* 三列布局 */
  }
}

.box_item_left {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 16px;
  grid-column-gap: 16px;
}

.box_item {
  width: 12.5vw;
  background: linear-gradient(46deg, #FCFBFE 0%, #FEFFF1 100%);
  border-radius: 8px;
  padding: 24px;

  .box_item_title {
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 400;
    font-size: 16px;
    color: #77778C;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .box_item_data {
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-style: normal;
    text-transform: none;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .box_item_data_num {
      font-weight: 800 !important;
      ;
      font-size: 24px !important;
      color: #000000 !important;
      ;
      margin-bottom: 3px !important;
      ;
      line-height: 28px;
    }

    div {
      display: flex;
      flex-direction: column;
      align-items: center;

      span {
        font-weight: 400;
        font-size: 16px;
        color: #77778C;
      }
    }
  }
}

.box_item2 {
  background: linear-gradient(46deg, #FCFBFE 0%, #F1FFF1 100%);
}

.box_item3 {
  background: linear-gradient(46deg, #FCFBFE 0%, #F1FEFF 100%);
}

.box_item4 {
  background: linear-gradient(46deg, #FCFBFE 0%, #FFF1F1 100%);
}

.box_item_right {
  background: #F4F5FB;
  border-radius: 8px;
  margin-left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 320px;
}

.echartBox {
  display: flex;
  align-items: center;
  justify-content: center;
}

.grade {
  margin-top: 12px;
}

.grade_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-row-gap: 16px;
  grid-column-gap: 16px;
}

.grade_list_item {
  padding: 16px;
  background: #FEFBEE;
  border-radius: 8px;
}

.grade_list_item_title {
  font-family: Source Han Sans SC, Source Han Sans SC;
  font-weight: 400;
  font-size: 14px;
  color: #000;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.grade_list_item_content {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;

  img {
    margin-bottom: 10px;
    width: 64px;
    height: 64px;
  }

  div {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-family: Source Han Sans SC, Source Han Sans SC;
    text-align: left;
    font-style: normal;
    text-transform: none;

    span {
      font-weight: 400;
      font-size: 12px;
      color: #000000;
    }
  }
}

.grade_list_item_content_num {
  font-weight: 500 !important;
  font-size: 24px !important;
}

.ml16 {
  margin-left: 16px;
}

.ml24 {
  margin-left: 24px;
}
</style>
<style>
.echartBox div {
  border-radius: 272px !important;

}
</style>
